<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta charset='utf-8'>
        <meta name="author" content="order by dede58.com"/>
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<title>注册</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta http-equiv="Cache-Control" content="no-siteapp">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<link rel="stylesheet" type="text/css" href="css/page.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<!--  引入jQuery.js -->
		<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/jquery.SuperSlide.2.1.js"></script>
			<style type="text/css">
			#yzmkuang{
			float:right;
			background:red;
			}
			</style>
	</head>
	
	<body class="sign-bg">
	<video loop="loop" autoplay="autoplay" preload="" muted="muted" src="img/background/元气桌面官网——动态壁纸桌面—高清壁纸下载(1).mp4" poster="" class="LoginTopNav_video_1W33g" 
		style="position: fixed;
		          right:0;
		          bottom: 0;
		          min-width: 100%;
		          min-height: 100%;
		          width: auto;
		          height: auto;
		          z-index: -9999;"> 抱歉，您的浏览器不支持内嵌视频 </video>
		<div class="sign clearfix">
			<div class="top clearfix">
				<a href="index.jsp" class="fl fanhui">返回首页</a>
				<p class="fr">
					已有商城账号？
					<a href="sign.jsp" class="zhuce ra3">
						登录
					</a>
				</p>
			</div>
			<div class="bottom clearfix box-s ra10" style="background-color: rgba(255,255,255,0.5);">
				<div class="sign-logo clearfix">
					<img src="img/yuanlogo.png"/>
				</div>
				<div class="content clearfix">
					<form action="../CustomerServelt" method="post" id="form"  >
					 <input type="hidden" name="op" value="addCustomer">
					<ul>
					<li>
							<span class="fl"></span>
							<input type="text" name="nickname" id="nicknameID" value="" placeholder="用户名" class="fl shuru" />
						    
						</li>
					    <p id="tip-nikename" class="pass-item-error"></p>
						<li>
							<span class="fl"></span>
							<input type="text" name="mobile" id="mobileID" maxlength="11" value="" placeholder="手机号码" class="fl shuru" onsubmit="checkMobile"/>
						    
						</li>
						<p id="tip-mobile" class="pass-item-error"></p>
						<li class="yanzhengma">
							<span class="fl hudun"></span>
							<input type="text" name="yanzheng2" id="yanzheng2ID"  maxlength="4" value="" placeholder="请输入验证码" class="fl shuru yzma" />
							<samp class="fr" id="yzm" style="color:#000000;background:#99FFFF;font=14px;font-size: large;/* font: inherit; *//* size: a3; */font-family: fantasy;letter-spacing: 14px;"></samp>
						</li>
						   <p id="tip-yanzheng2" class="pass-item-error"></p>
						<li>
							<span class="fl mima"></span>
							<input type="password" name="password" id="mima1" value="" placeholder="密码" class="fl shuru" />
						</li>
						<p id="tip-password" class="pass-item-error"></p>
						<li>
							<span class="fl mima" id="num"></span>
							<input type="password" name="password1" id="mima2" value="" placeholder="请再次输入密码" class="fl shuru" />
						</li>
						  <p id="tip-password1" class="pass-item-error"></p>
						<li class="jizhu" style="background-color: rgba(255,255,255,0);">
							<div class="radiothree fl"> 
							    <label>
							        <input type="checkbox" name="opt-text fl ml21" id="opt-text fl ml21" value="">
							        <div class="option"></div>
							        <p class="opt-text fl ml20" id="opt-text fl ml20">我已阅读并同意<a href="zcxy.html">《XXX艺术用户注册协议》</a></p>
							    </label>
							</div>
						</li>
					</ul>
					<a href="#" class="sign-btn zhuce-btn ra5">立即注册</a>
					<input  type="submit" id="zc"  value="立即注册" lay-submit lay-filter="login" style="width: 100%; position: relative; top: -52px; height: 50px; opacity: 0;">
				</form>
				</div>				
			</div>
			<script src="js/jquery-3.6.0.js"></script>
			<script src="js/jquery-form.js"></script>
			<script type="text/javascript">
			
			$(function(){ 
				//生成随机数 
				let x=9999;
				 let y=1000;
				 let randnum =parseInt(Math.random()*(x-y+1))+y;
				 document.getElementById("yzm").innerText = randnum;
				 $("#yzm").click(function(){
					 
					 randnum =parseInt(Math.random()*(x-y+1))+y;
					 document.getElementById("yzm").innerText = randnum;
				});
				//正则判定手机号
				let num= /^(13[0-9]|14[01456789]|15[0-9]|16[2567]|18[0-9]|19[0-9])\d{8}$/;
				 // 设置标记
				let nicknameIDflag = false;
				let  mobileIDFlag  =false;
				let  yanzheng2IDFlag =false
				let  mima1Flag =false;
				let  mima2Flag =false;
				let  chooseFlag=false;
				 // 对用户名做失去焦点事件
				 $("#nicknameID").blur(function(){
			
					 if( $(this).val().length > 10 || $(this).val().length < 6){
						$("#tip-nikename").text("用户名长度必须在6-10之间");
						$("#tip-nikename").css("color","red");
						nicknameIDflag = false;
					 }else{
					$("#tip-nikename").text("");
						 nicknameIDflag = true;
					 }
				 });
				 /* $("mobileID").val().length > 12 && $(this).val().length< 8){
				$("tip-mobile").text("密码长度必须在8-10");
				$("tip-mobile").css();
			
			}
					 */ // 对手机框做失去焦点事件
					 $("#mobileID").blur(function(){
							
						 if(num.test($("#mobileID").val())){
							 $("#tip-mobile").text("");
							mobileIDFlag = false;
						 }else{
								$("#tip-mobile").text("请输入正规手机号");
								$("#tip-mobile").css("color","red"); 
						mobileIDFlag = true;
						 }
					 });
					// 对验证框框做失去焦点事件
					 $("#yanzheng2ID").blur(function(){
							
						 if(randnum == $("#yanzheng2ID").val()){
							 $("#tip-yanzheng2").text("");
							 yanzheng2IDFlag = false;
						 }else{
								$("#tip-yanzheng2").text("请输入正常的验证码");
								$("#tip-yanzheng2").css("color","red"); 
								yanzheng2IDFlag = true;
						 }
					 });
					// 对密码框做失去焦点事件
					 $("#mima1").blur(function(){
							
						 if($(this).val().length > 12 || $(this).val().length < 8){
							 $("#tip-password").text("密码长度必须在8-12");
								$("#tip-password").css("color","red"); 
							 
							 mima1Flag = false;
						 }else{
							 $("#tip-password").text("");
								mima1Flag = true;
						 }
					 });
					// 对密码框做失去焦点事件
					 $("#mima2").blur(function(){
							
						 if($("#mima2").val() != $("#mima1").val()){
							 $("#tip-password1").text("密码不一致");
								$("#tip-password1").css("color","red"); 
							 
							 mima2Flag = false;
						 }else{
							 $("#tip-password1").text("");
								mima2Flag = true;
						 }
					 });
				     $(document).ready(function(){
				    	 $("#opt-text fl ml21").click(function(){
				    	var val=$("#opt-text fl ml21").val();
				    	  chooseFlag = true;
				    	  console.log(chooseFlag);
				    	//if(val==false){
				    	//	 alert("必须选中协议");
				    	//	 return false;
				    	// }
				    	 })
				     })
					//对表单进行提交事件
				$("#form").submit(function(){
					
					if(nicknameIDflag==true && mobileIDFlag==false && yanzheng2IDFlag==false && mima1Flag==true && mima2Flag==true && chooseFlag==true ){
                          
						$(this).ajaxSubmit(function(result){//result服务器响应的数据
							$.ajax({
								async:true,//表示请求是否异步处理，默认是true；
							    type:"GET",//请求的类型
							    url:"../CustomerServelt",//规定发送请求的URL，默认是当前页面，
							    data:{
							    	//参数名：值
							    	op:"find2",
							    	customernickname:$("#nicknameID").val(),
							    	customermobile:$("#mobileID").val(),
							    	customerpassword:$("#mima1").val()
							    },
							    contentType:"application/x-www-form-urlencoded",//发送数据到服务器所使用的内容类型，默认是"application/x-www-form-urlencoded"
							    dataType:"json",//预算服务器响应的数据类型
							    success:function(result,status,xhr){
							    	if(result.status==1){
							    		alert("注册成功");	
							    	}else{
							    		alert("注册失败");
							    	}
							    },
							error:function(xhr,status,error){
								//如果请求失运行函数
								//处理异步请求失败。。
								alert("异步请求失败");
							}
							});				
						});
						  return false;
					}else
						alert("请完成注册信息");
						return false;
					});
							
			
		});
			
			
	/* let  nicknameIDflag =false;
	let  mobileIDFlag  =false;
	let  yanzheng1IDFlag =false;
	let  yanzheng2IDFlag =false;
	let  mima1Flag =false;
	let  mima2Flag =false;
	let  random;//系统生成的验证码
	//表单提交验证
	function checkAll(){
		if(nicknameIDflag && mobileIDFlag && yanzheng1IDFlag && yanzheng2IDFlag && mima1Flag &&mima2Flag){
			//获取复选框
			let checked = document.getElementById("opt-text fl ml20").checked;
			if(!checked){
				alert("请打勾协议才能完成注册！");
				return false;
			}
			return true;
		}else{
			alert("请完成注册信息！");
		}
		return false;
	}
 */
	</script>
			<div class="xia clearfix">
				<p>Copyright © 2020 厦门游戏商城(xiamenyouxishangcheng). All Rights Reserved.</p>
			</div>
		</div>
		
	
		
	</body>
	
	
</html>
    